@extends('home.layouts.auth')
@section('title')
    注册
@endsection

@section('css')
    <style>
        .mdui-textfield {
            padding-top: 0;
        }

        .auth-goto {
            margin-bottom: 10px;
            padding-top: 50px;
            color: #333;
            font-size: 16px;
        }

        .auth-third {
            margin-top: 80px;
        }

        .auth-third .hd {
            height: 16px;
            font-size: 12px;
            text-align: center;
        }

        .auth-third .hd .layout-inner {
            margin-bottom: 7px;
            border-bottom: 2px solid #f2f2f2;
        }

        .auth-third .hd h3 {
            width: 106px;
            margin: 0 auto -8px;
            background-color: #fff;
            font-weight: 400;
            line-height: 16px;
            color: #ccc;
        }

        .auth-third .links {
            margin: 0 auto;
            padding-top: 20px;
        }

        .auth-third .links a {
            display: inline-block;
            margin: 0 8px;
        }

        .auth-icon {
            background-image: url("{{asset('/images/fouricon.png')}}");
            background-size: 298px 120px;
        }

        .icon-tencent, .icon-weibo, .icon-weixin {
            width: 55px;
            height: 55px;
            background-position: 0 -65px;
        }

        .auth-third a:hover .icon-tencent {
            background-position: 0 -1px;
        }

        .auth-third .icon-weibo {
            background-position: -81px -65px;
        }

        .auth-third a:hover .icon-weibo {
            background-position: -81px -1px
        }

        .auth-third .icon-weixin {
            background-position: -162px -65px;
        }

        .auth-third a:hover .icon-weixin {
            background-position: -162px -1px
        }

        .auth-icon {
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }
    </style>
@endsection
 
@section('left')
    <form action="" class="mdui-p-x-3" method="post" id="register-form">
        {{csrf_field()}}
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">手机号|邮箱</label>
            <input id="phone" class="mdui-textfield-input" type="text" name="user" value=""/>
            <div class="mdui-textfield-error">请输入正确的手机号|邮箱</div>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label ">
            <label class="mdui-textfield-label">请输入6位以上密码</label>
            <input id="password" class="mdui-textfield-input" type="password" name="password"/>
            <div class="mdui-textfield-error">请输入格式正确的密码</div>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label ">
            <label class="mdui-textfield-label">确认密码</label>
            <input id="confirm" class="mdui-textfield-input" type="password" name="confirm"/>
            <div class="mdui-textfield-error">两次输入密码不一致</div>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label ">
            <div class="mdui-row">
                <div class="mdui-col-xs-7">
                    <label class="mdui-textfield-label">验证码</label>
                    <input id="code" class="mdui-textfield-input" type="text" name="code"/>
                    <div class="mdui-textfield-error">请输入验证码</div>
                </div>
                <div class="mdui-col-xs-5 mdui-text-right">
                    <label class="mdui-textfield-label">&nbsp;</label>
                    <a id="send-code"
                       class="mdui-btn mdui-btn-block mdui-color-theme mdui-ripple">
                        获取验证码
                    </a>
                </div>
            </div>
        </div>
        <button class="mdui-btn
        mdui-btn-block mdui-color-theme mdui-ripple mdui-m-t-2 mdui-m-b-1" type="submit">注册
        </button>
    </form>
@endsection

@section('right')
    <div class="auth-goto">
        <p class="mdui-text-center mdui-typo">
            <span>已有账号</span>
            <a href="{{url('/login')}}">立即登录</a>
        </p>
    </div>
    <div class="auth-third">
        <header class="hd">
            <div class="layout-inner">
                <h3>快速登录</h3>
            </div>
        </header>
        <div class="links mdui-text-center">
            <a href="{{url('/connect/qq')}}">
                <i class="auth-icon icon-tencent"></i>
            </a>
            <a href="{{url('/oauth/weibo')}}">
                <i class="auth-icon icon-weibo"></i>
            </a>
            <a href="{{url('/connect/weixin')}}">
                <i class="auth-icon icon-weixin"></i>
            </a>
        </div>
    </div>
@endsection
@section('js')
    <script>
    //增加验证码的判断 id="send-code"
    //添加一个判断的标识flag
    var flag=true;

    $("#send-code").click(function(){
        if(flag == false) {
            return false;
        }
    //获取用户填写的信息
        var user =$("input[name=user]").val();
    //不能为空
        if(user == '')
        {
            alert('手机号|邮箱不能为空');
            return false;
        }
    //判断信息类型
        //如果是数值型
        if(!isNaN(user))
        {
           flag=false;
            var num1 =60;
            //添加一个定时器
            var timer1=setInterval(function(){
                $("#send-code").html(num1+'s后重新发送');
                $("#send-code").css('color','red');
            if(num1 == 0){
            flag=true;
            clearInterval(timer1);
           $("#send-code").html('重新发送');
           $("#send-code").css('color','green');
       }
        num1--;
          },1000);
        //ajax请求路由,来发送手机短信验证码
       $.ajax({
         url:'{{url('/home/sendSMS')}}',
           dataType:'json',
           data:{phone:user},
           success:function (data) {
               if (data == null) {
            alert('服务器繁忙');
            return;
            }
            if (data.status != 0) {
            alert(data.message);
            return;
            }
            alert('发送成功');
            },
            error:function (xhr, status, error) {
            console.log(xhr);
            console.log(status);
            console.log(error);
            }
         });
    }else{
            //判断邮箱是否合法
            var preg = regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
            if(preg.test(user) == false)
            {
                alert("邮箱格式不正确");
                return false;
            }else {
                //进行邮箱验证
                //调整按钮属性
                $(this).addClass('disabled');
                flag = false;
                //发送验证码
                var num = 60;
                //添加一个定时器
                var timer = setInterval(function(){
                    $("#send-recode").html(num+'s后重新发送');
                    if(num == 0){
                        flag=true;
                        clearInterval(timer);
                        $("#send-recode").html('重新发送');
                    }
                    num--;
                },1000);
                //ajax请求路由,来发送邮箱验证码
                $.ajax({
                    url:'{{url('/home/sendRegcode')}}',
                    dataType:'json',
                    data:{user:user},
                    success:function (data) {
                        if (data == null) {
                            alert('服务器繁忙');
                            return false;
                        }else if (data.status == 0) {
                            alert(data.message);
                            return false;
                        }else{
                            alert(data.message);
                            return false;
                        }
                    },
                    error:function (xhr, status, error) {
                        console.log(xhr);
                        console.log(status);
                        console.log(error);
                    }
                });
            }
            }
        });
    </script>
    {{--提交按钮--}}
    <script>
        $("#register-form").submit(function () {
            var data= $(this).serialize();
            $.ajax({
                url: '{{url('/home/addUser')}}',
                data: data,
                type: 'post',
                dataType:'json',
                success: function (data) {
                    if(data.status!=0)
                    {
                        alert(data.message);
                        return;
                    }
                    alert(data.message);
                    location.href = "{{url('/login')}}";
                }
            });
            return false;
        });
    </script>
@endsection